// components/Modal.js
export default class Modal {
    constructor(options = {}) {
        this.options = {
            title: '提示',
            content: '',
            buttons: [],
            closeOnMask: true,
            ...options
        };
        this.isOpen = false;
        this.init();
    }

    // 初始化组件结构
    init() {
        this.createStyles();
        this.createDOM();
        this.bindEvents();
    }

    // 创建样式（防止重复注入）
    createStyles() {
        if (document.getElementById('modal-styles')) return;

        const style = document.createElement('style');
        style.id = 'modal-styles';
        style.textContent = `
      .modal-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 1000;
      }
      .modal-wrapper {
        background: white;
        border-radius: 8px;
        min-width: 300px;
        max-width: 80vw;
        transform: translateY(-20px);
        transition: all 0.3s;
      }
      .modal-header {
        padding: 16px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .modal-close {
        cursor: pointer;
        font-size: 24px;
        line-height: 1;
        padding: 0 8px;
      }
      .modal-content {
        padding: 16px;
        max-height: 60vh;
        overflow-y: auto;
      }
      .modal-footer {
        padding: 16px;
        border-top: 1px solid #eee;
        text-align: right;
      }
      .modal-button {
        margin-left: 8px;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
      }
    `;
        document.head.appendChild(style);
    }

    // 创建DOM元素
    createDOM() {
        this.mask = document.createElement('div');
        this.mask.className = 'modal-mask';

        this.wrapper = document.createElement('div');
        this.wrapper.className = 'modal-wrapper';

        // Header
        const header = document.createElement('div');
        header.className = 'modal-header';

        this.titleEl = document.createElement('span');
        this.titleEl.textContent = this.options.title;

        this.closeBtn = document.createElement('span');
        this.closeBtn.className = 'modal-close';
        this.closeBtn.innerHTML = '&times;';

        header.append(this.titleEl, this.closeBtn);

        // Content
        this.contentEl = document.createElement('div');
        this.contentEl.className = 'modal-content';
        this.contentEl.innerHTML = this.options.content;

        // Footer
        this.footerEl = document.createElement('div');
        this.footerEl.className = 'modal-footer';
        this.options.buttons.forEach(btn => {
            const button = document.createElement('button');
            button.className = `modal-button ${btn.type || ''}`;
            button.textContent = btn.text;
            button.onclick = () => {
                btn.handler?.();
                this.close();
            };
            this.footerEl.appendChild(button);
        });

        this.wrapper.append(header, this.contentEl, this.footerEl);
        this.mask.appendChild(this.wrapper);
    }

    // 事件绑定
    bindEvents() {
        this.closeBtn.addEventListener('click', () => this.close());

        if (this.options.closeOnMask) {
            this.mask.addEventListener('click', (e) => {
                if (e.target === this.mask) this.close();
            });
        }
    }

    // 打开弹窗
    open() {
        if (this.isOpen) return;

        document.body.appendChild(this.mask);
        this.isOpen = true;

        // 触发重绘以应用动画
        requestAnimationFrame(() => {
            this.mask.style.opacity = '1';
            this.wrapper.style.transform = 'translateY(0)';
        });
    }

    // 关闭弹窗
    close() {
        this.mask.style.opacity = '0';
        this.wrapper.style.transform = 'translateY(-20px)';

        setTimeout(() => {
            this.mask.remove();
            this.isOpen = false;
        }, 300);
    }

    // 更新内容（API方法）
    setContent(html) {
        this.contentEl.innerHTML = html;
    }

    // 更新标题（API方法）
    setTitle(text) {
        this.titleEl.textContent = text;
    }
    }
